<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件</title>
</head>

<body>
  <div id="app">
    <!-- 使用组件标签必须有结束符 -->
    <my-component></my-component>
    <my-component />
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1. 定义组件
    const MyComponent = Vue.extend({
      // 组件配置对象（之前学的所有内容组件配置对象都可以使用）
      // data必须写成函数形式
      data() {
        // 返回值对象，就是data数据
        return {
          num: 0
        }
      },
      methods: {
        handleClick() {
          this.num++
        }
      },
      mounted() {
        console.log('mounted');
      },
      // ...
      // 组件要渲染的模板页面
      // 要求：必须有根标签
      template: `<div>
        <p>{{num}}</p>
        <button @click="handleClick">按钮</button>
      </div>`
    })

    // 2. 注册组件
    // 注册局部组件：只有当前组件可以使用
    // 注册全局组件：所有组件都可以使用
    Vue.component('MyComponent', MyComponent)

    // 3. 使用组件
    // 通过标签形式使用组件
    // 不用脚手架，使用组件名称是my-component才行，大驼峰不行
    // 将来使用脚手架，my-component和MyComponent都行了

    new Vue({
      el: '#app',
      // 注册局部组件
      // components: {
      //   MyComponent
      // }
    })
  </script>
</body>

</html>